<template>
  <el-table v-loading="loadingJobs" :border="true" :data="list">
    <el-table-column label="职位">
      <template slot-scope="{row}">
        <template v-if="row.edit">
          <el-input v-model="row.occ" class="edit-input" size="mini" />
        </template>
        <span v-else>{{ row.occ }}</span>
      </template>
    </el-table-column>
    <el-table-column label="人数">
      <template slot-scope="{row}">
        <template v-if="row.edit">
          <el-input v-model="row.recNum" class="edit-input" size="mini" />
        </template>
        <span v-else>{{ row.recNum }}</span>
      </template>
    </el-table-column>
    <el-table-column label="要求">
      <template slot-scope="{row}">
        <template v-if="row.edit">
          <el-input v-model="row.claim" class="edit-input" size="mini" />
        </template>
        <span v-else>{{ row.claim }}</span>
      </template>
    </el-table-column>
    <el-table-column align="center" width="200px">
      <template slot="header">
        <el-button type="success" size="mini" @click="confirCreate">
          <i class="el-icon-plus" /> 添加
        </el-button>
      </template>
      <template slot-scope="scope">
        <el-button
          v-if="scope.row.edit"
          type="success"
          size="mini"
          icon="el-icon-circle-check-outline"
          @click="confirmEdit(scope.row)"
        >提交</el-button>
        <el-button
          v-else
          size="mini"
          type="warning"
          icon="el-icon-edit"
          @click="scope.row.edit=!scope.row.edit"
        >编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete(scope.$index, scope.row)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {
  getWuyeJobs,
  setWuyeJobs,
  createWuyeJobs,
  delWuyeJobs
} from '@/api/wuye'
export default {
  name: 'TableJobs',
  data() {
    return {
      loadingJobs: false,
      list: []
    }
  },
  created() {
    this.fetchJobs()
  },
  methods: {
    async fetchJobs() {
      this.loadingJobs = true
      const { data: jobs } = await getWuyeJobs()
      this.list = jobs.map(v => {
        this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
        // v.originalOcc = v.occ //  will be used when user click the cancel botton
        return v
      })
      this.loadingJobs = false
    },
    async confirCreate() {
      const { data: { id }} = await createWuyeJobs(id)
      const params = {
        id: id,
        occ: '新增职位',
        claim: '新增要求',
        recNum: '0',
        edit: true
      }
      this.list.unshift(params)
    },
    async handleDelete(index, row) {
      const result = await delWuyeJobs(row.id)
      this.list.splice(index, 1)
      this.$message({
        message: `(${row.id})${result.message}`,
        type: 'success'
      })
    },
    async confirmEdit(row) {
      const { id, claim, occ, recNum } = row
      const result = await setWuyeJobs(id, {
        claim,
        occ,
        recNum
      })
      const { message, id: newId = id } = result
      row.edit = false
      row.id = newId
      this.$message({
        message: `(${row.id})${message}`,
        type: 'success'
      })
    }
  }
}
</script>

